<template>
  <div class="singer-area">
    <div class="text-area ">

      <span :class="[currenIndex == index ? 'active' : '']" v-for="item, index in titles" :key="index" class="scale"
        @click="chooseItem(index, item)">{{ item.name }}</span>

    </div>
    <div class="grid">
      <ShowItemText @click="$emit('clickItem', item)" v-if="isSong" :song="item" style="margin:0px 2px"
        v-for="item  in songList" :key="item.id" />
      <ShowItemText @click="$emit('clickItem', item)" v-if="!isSong" :sing="item" style="margin:0px 2px"
        v-for="item  in singList" :key="item.id" />
    </div>
    <footer class="pagination ">
      <el-pagination v-model:current-page="currentPage" :page-size="15" background @current-change="pageChange"
        layout="total, prev, pager, next" :total="total" />
    </footer>
  </div>

</template>

<script setup lang="ts">
import { computed, ref } from "vue";

import ShowItemText from "@/layout/components/ShowItemText.vue";
import { ISingerItem, ISongItem } from "@/fetch/type";
const props = defineProps<{
  isSong: boolean,
  total: number,
  titles: { name: string, type: string }[],
  songList?: ISongItem[],
  singList?: ISingerItem[]
}>()


const emits = defineEmits<{
  pageChange: [page: number, style?: string]
  chooseStyle: [style: string]
  clickItem: [item: Record<string, any>]
}>()
const currenIndex = ref(0)
const currentPage = ref(1)
// 分页改变时
const pageChange = (page: number) => {
  currentPage.value = page
  const style = props.titles.find((_, index) => index == currenIndex.value).name
  emits('pageChange', page, currenIndex.value != 0 ? style : null)
}


// 选择分类时
const chooseItem = (index: any, type) => {
  console.log(type)
  currenIndex.value = index
  currentPage.value = 1
  emits('chooseStyle', index != 0 ? type.name : null)
}

</script>
<style lang="scss" scoped>
.singer-area {
  padding: 0 4rem;
  overflow: hidden;
  color: var(--font-default-color);

  .pagination {
    display: flex;
    justify-content: center;

  }


  .text-area {
    display: flex;
    align-items: cneter;
    justify-content: flex-start;
    margin-left: 2rem;
    transition: all .3s;

    .active {
      transform: scale(1.3);
      font-weight: 700;
      color: var(--font-default-color);
    }

    span {
      width: 4rem;
      color: var(--font-gray-color);
      transition: all 0.3s;
      font-size: 14px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
    }


  }
}
</style>